<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      google.load("visualization", "1.0", {packages:["corechart"]});
      google.setOnLoadCallback(drawAllCharts);

      /*
      This funtion creates a data table from previously formatted arrays.
      Data array is created by the ProcSnapshot class and formatted as such:
      [Timestamp, PID1, PID2, PID3,...], also need descriptive title.
      LABEL is a string for the title/axis labels and element name.
      MEMTYPE is the variable for the data array.
      */
      function drawOneChart(label, memtype) {
        var data = google.visualization.arrayToDataTable(memtype);
        var options = {
          title: label + " [MBs] per PID Over Time",
          hAxis: {title: "Seconds since boot",
                  titleTextStyle: {color: 'green'}},
          vAxis: {title: label + " [MB]", titleTextStyle: {color: 'green'}},
        };

        var cdiv = document.getElementById(label);
        var chart = new google.visualization.LineChart(cdiv);
        chart.draw(data, options);
      }

      /* Calls drawChart() for each different type of graph */
      function drawAllCharts() {
        /* Implementation without calling drawOneChart() ten times, needs work.
           var chartypes = {Rss: "RSS", Pss: "PSS",
                            Private_Clean: "Private Clean",
                            Private_Dirty: "Private Dirty",
                            Shared_Clean: "Shared Clean",
                            Shared_Dirty: "Shared Dirty",
                            Private: "Private", Shared: "Shared",
                            Anonymous: "Anonymous", Referenced: "Referenced"};

        for (type in chartypes) {
          drawOneChart(chartypes[type], type);
        } */
        drawOneChart("RSS", %(Rss)s);
        drawOneChart("PSS", %(Pss)s);
        drawOneChart("Private Clean", %(Private_Clean)s);
        drawOneChart("Private Dirty", %(Private_Dirty)s);
        drawOneChart("Shared Clean", %(Shared_Clean)s);
        drawOneChart("Shared Dirty", %(Shared_Dirty)s);
        drawOneChart("Private", %(Private)s);
        drawOneChart("Shared", %(Shared)s);
        drawOneChart("Anonymous", %(Anonymous)s);
        drawOneChart("Referenced", %(Referenced)s);
      }

    </script>
  </head>

  <body>

    <p> Shows memory trends by process IDs over a given period of time. </p>
    <p> Data logged starting at %(timestamp)s </br>
        System information: %(version)s </br>
        ChromeOS release description: %(release)s </br>
        [Insert additional data (events, actions, anything else that would help
         the user understand the graphs] </p>

    </br>

    <p> Graph showing proportional set size: private + proportional shared. </p>
    <div id="PSS", style="width:900px; height:500px; margin:auto;"></div>

    </br>

    <p> Graph showing resident set size: memory mapped into RAM. </p>
    <div id="RSS", style="width:900px; height:500px; margin:auto;"></div>

    </br>

    <p> Graph showing total private memory. </p>
    <div id="Private", style="width:900px; height:500px; margin:auto;"></div>

    </br>

    <p> Graph showing total shared memory. </p>
    <div id="Shared", style="width:900px; height:500px; margin:auto;"></div>

    </br>

    <p> Graph showing dirty private memory. </p>
    <div id="Private Dirty", style="width:900px; height:500px; margin:auto;">
    </div>

    </br>

    <p> Graph showing clean private memory. </p>
    <div id="Private Clean", style="width:900px; height:500px; margin:auto;">
    </div>

    </br>

    <p> Graph showing dirty shared memory. </p>
    <div id="Shared Dirty", style="width:900px; height:500px; margin:auto;">
    </div>

    </br>

    <p> Graph showing clean shared memory. </p>
    <div id="Shared Clean", style="width:900px; height:500px; margin:auto;">
    </div>

    </br>

    <p> Graph showing total anonymous memory. </p>
    <div id="Anonymous", style="width:900px; height:500px; margin:auto;"></div>

    </br>

    <p> Graph showing total referenced memory. </p>
    <div id="Referenced", style="width:900px; height:500px; margin:auto;"></div>

  </body>
</html>
